<template>
    <div class="leftMenuContainer">
      <div class="leftHeader">
        <div class="logo" @click="gotoHome">
          <div class="icon">
            <svg t="1674110514341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12821" width="200" height="200"><path d="M939.008 245.248L521.728 6.656c-9.216-5.12-20.48-5.12-29.696 0L74.752 245.248c-9.216 5.12-14.848 14.848-14.848 25.6V752.64c0 8.704 3.584 16.896 9.728 22.528 0 0 0 4.096 5.12 5.12L492.032 1018.88c9.216 5.632 20.48 5.632 29.696 0l417.28-238.592 5.12-5.12c5.632-5.632 9.216-12.8 9.728-20.992V270.848c0-10.752-5.632-20.48-14.848-25.6z m-44.544 396.288L588.8 111.616l306.176 178.688-0.512 351.232z m-22.016 81.408H141.312L506.88 89.6l365.568 633.344zM424.96 111.616L119.296 641.536v-353.28L424.96 111.616z m81.92 847.872l-306.176-178.688h611.84L506.88 959.488z" fill="#1296db" p-id="12822"></path></svg>
          </div>
          <div class="text" v-if="appConfig.showMenu">XRPA</div>
        </div>
        <div class="createEnv" v-if="appConfig.showMenu">
          <el-button class="button" type="primary" round @click="createEnv">新建环境</el-button>
        </div>
      </div>
      <div class="menu">
        <el-menu
          :default-active="defaultActive"
          class="el-menu-vertical"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          :collapse="!appConfig.showMenu"
          :default-openeds="['1', '2', '3','4']"
          :collapse-transition="false"
          :router="false"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon class="menuicon"><ChromeFilled /></el-icon>
              <span>常用</span>
            </template>
            <el-menu-item index="/env/envMgr">环境管理</el-menu-item>
            <el-menu-item index="/env/envGroupMgr">环境分组管理</el-menu-item>
            <el-menu-item index="/env/envTagMgr">环境标签管理</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon class="menuicon"><Promotion /></el-icon>
              <span>RPA</span>
            </template>
            <el-menu-item index="/rpa/task">任务管理</el-menu-item>
            <el-menu-item index="/rpa/history">任务详情</el-menu-item>
            <el-menu-item index="/rpa/taskGroupMgr">任务分组管理</el-menu-item>
            <el-menu-item index="/rpa/taskTagMgr">任务标签管理</el-menu-item>
            <el-menu-item index="/rpa/points">点数消费记录</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon class="menuicon"><HomeFilled /></el-icon>
              <span>管理</span>
            </template>
            <el-menu-item index="/myTenant/billings">我的账单</el-menu-item>
            <el-menu-item index="/myTenant/accountMgr">账号管理</el-menu-item>
            <el-menu-item index="/myTenant/operationLog">操作日志</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="4" v-if="userInfo.username == 'admin'">
            <template #title>
              <el-icon class="menuicon"><HomeFilled /></el-icon>
              <span>超级管理员</span>
            </template>
            <el-menu-item index="/superAdminTenantMgr">租户管理</el-menu-item>
          </el-sub-menu>

        </el-menu>
      </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import {useAppStore} from '../../stores/app'
import { storeToRefs } from 'pinia'
import {
  Menu as IconMenu,
  Promotion,
  HomeFilled,
  ChromeFilled
} from '@element-plus/icons-vue'
import { useRoute, useRouter } from "vue-router"
import {useUserStore} from '../../stores/user'

const defaultActive = ref("");
const route = useRoute();
const router = useRouter();

watch(
    () => route.path,
    (path: any) => {
      if (route.meta.title) {
        console.log('route path', route.path);
        defaultActive.value = route.path;
      }
      if(route.path.indexOf('/env/envMgr/createEnv')>=0){
        defaultActive.value = '/env/envMgr';
      }else if(route.path.indexOf('/env/envMgr/editEnv')>=0){
        defaultActive.value = '/env/envMgr';
      }else if(route.path.indexOf('/rpa/task/flow/')>=0){
        defaultActive.value = '/rpa/task';
      }
    },
    {
      immediate: true,
      deep: true,
    }
  )


const appStore = useAppStore()
const userStore = useUserStore();

const { appConfig } = storeToRefs(appStore)
const { userInfo } = storeToRefs(userStore);

const handleOpen = ()=>{
  console.log('handleOpen');
}

const handleClose = ()=>{
  console.log('handleClose');
}

const handleSelect = (index:any) =>{
    console.log("handleSelect", index);
    router.replace({path:index});
}
const createEnv = () => {
  router.push("/env/envMgr/createEnv");
}

const gotoHome = () =>{
  router.replace({path:'/'});
}
</script>



<style scoped>
.leftMenuContainer {
  background-color: white;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.menu {
  height: 100%;
  overflow: scroll;
  padding-bottom: 10px;
}
.el-menu-vertical {
  height: 100%;
}
.leftHeader {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #333333;
  font-weight: 600;
  font-size: 26px;
  line-height: 26px;
}
.logo {
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.logo .icon{
  width: 26px;
  height: 26px;
}
.logo .text {
  margin-top: 1px;
  margin-left: 5px;
}

.createEnv {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.createEnv .button {
  width: 80%;
}
.menuicon {
  color: #5a9ef8;
}
.leftHeader {
  border-right: solid 1px var(--el-menu-border-color);
}
</style>
